<template>
	
	<div class="app">
		
		<mt-cell title="提交评论">
			<mt-button type="primary" size="small" plain>返回</mt-button>
		</mt-cell>
			<div class="mui-input-row" style="margin: 10px 5px;">
					<textarea id="textarea" rows="5"  ref="postcontent"  placeholder="请输入评论内容"></textarea>
			</div>
		<mt-button type="primary"  @click="postcom" size="large">发表</mt-button>
		
		<mt-cell title="评论列表" value="22条评论">
			
		</mt-cell>
		<div class="mui-content">
			<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" >
			        <li class="mui-table-view-cell" v-for="(item,index) in com" :key="index">
			            <div class="mui-table">
			                <div class="mui-table-cell mui-col-xs-10">
			                    <p class="mui-h6 mui-ellipsis">{{item.content}}</p>
			                    <h5>{{item.user_name}}<span class="mui-h5">{{item.add_time | time("YYYY-MM-DD")}}</span></h5>
			                </div>
			            
			            </div>
			        </li>
			</ul>
		</div>
			
			<mt-button  @click="handleBottomChange" size="large" type="primary" plain >{{msg}}</mt-button>
	</div>
	
</template>

<script>
	import Vue from 'vue'
	import  commit  from "../../kits/commit.js"
	import { MessageBox } from 'mint-ui';
	import { Loadmore } from 'mint-ui';
	Vue.component(Loadmore.name, Loadmore);
	export default{
		data(){
			return{
					commid:1,
					com:[],
					newcom:[],
					msg:"点击加载更多"
			}
		},
		created(){
			
			this.getcom(this.artid,this.commid)
			
		},
		methods:{
			
			getcom(artid,commid,isreload){
				let url = commit.api + "/api/getcomments/"+artid+"?pageindex="+commid;
				this.$http.get(url).then(res=>{
					
					this.newcom = res.body.message;
					
					this.com = isreload ? res.body.message : this.com.concat(res.body.message);
				},res=>{
					console.log("数据获取失败")
				})
			},
			
			postcom(){
				let contentText = this.$refs.postcontent.value
				if(!contentText || contentText.trim().length<=0){
					MessageBox('提示', '必须填写内容');
					this.$refs.postcontent.value=""
					return
				}
				
				let url = commit.api + "/api/postcomment/"+this.artid;
				this.$http.post(url,{content:contentText},{emulateJSON:true}).then(res=>{
					MessageBox('提示', '操作成功');
					
					this.getcom(this.artid,this.commid,true);
					
					this.$refs.postcontent.value=""
				},res=>{
					console.log("数据获取失败")
				})
			},
			handleBottomChange(){
				if (this.newcom.length < 10){ 
					this.msg = "没有内容了"
					return 
				}
				this.commid++;
				this.getcom(this.artid,this.commid)
			}
			
		},
	
		  props:['artid']  //这个数据是从父组件传入进来的
			
	}
	
</script>

<style scoped>
	.mui-ellipsis{
		white-space: normal;
	}
	.mui-table-cell  h5{
		color: #007AFF;
	}
	.mui-h5{
		float: right;
	}
	
	.mint-button--primary.is-plain{
		border:0
	}
	
	
</style>